<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="{{cate.seoDescription || site.description}}">
    <meta name="keywords" content="{{cate.seoKeywords || site.keywords}}" />
    <meta property="og:title" content="{{article.title}}-{{cate.name}}-{{site.name}}" />
    <meta property="og:description" content="{{cate.seoDescription || site.description}}" />
    <title>{{article.title}}-{{site.name}}</title>
    {{include './common/meta.html'}}

<body class="bg-f8f8f8">
    <!-- 头部 -->
    {{include './common/header.html'}}

    <!-- 头条文章 -->
    <main class="bg-f2f2f2 pt-10 pb-20 flex">

        <div class="main center mt-10 flex gap-20">
            <!-- 最新文章 -->
            <article class="w-full">
                <div class="bg-fff radius-6 pd-15 mb-1 f-14 c-999">
                    <i class="ico-20 ico-home pos-r t-3"></i>
                    <a class="" href="/">首页</a> /
                    {{each position}}
                        {{if $index < position.length-1}} 
                            <a href="{{$value.path}}/index.html">{{$value.name}}</a> /
                        {{else}}
                            <a class="c-666" href="{{$value.path}}/index.html">{{$value.name}}</a>
                        {{/if}}
                    {{/each}}
                </div>

                <div class="bg-fff radius-6 pd-25">
                    <header class="border-b pos-r">
                        <h2 class="f-26 c-252933  bold mt-10">
                            <!-- <i class="ico-20 ico-speech pos-r t-4 ml-4 mr-4" id="audio"></i> -->
                            {{article.title}}</h2>
                        <p class="f-12 mt-5 mb-26 flex">
                            <span class="c-999 ">
                                <i class="ico-20 ico-time pos-r t-4"></i> {{article.updatedAt}}
                                <i class="ico-20 ico-admin pos-r t-4 ml-4"></i> {{article.author}}
                                <i class="ico-20 ico-view pos-r t-5 ml-4"></i> 阅读（{{article.pv}}）
                                <!-- <i class="ico-20 ico-zan pos-r t-4 ml-4"></i>点赞（95） -->
                            </span>

                            {{each article.tags}}
                            <a class="el-tag mr-5 mb-5" href="/tags/{{$value.name}}.html"
                                title="{{$value.name}}">{{$value.name}}</a>
                            {{/each}}
                        </p>
                    </header>

                    {{if article.description}}
                    <section class="introduction pd-10 border-6 mb-20 mt-20 lh-25 f-14 bg-f2f2f2">
                        「导读」{{@ article.description}}
                    </section>
                    {{/if}}
                    <article id="article" class="article-cont f-17 lh-35">
                        {{@ article.content}}
                    </article>

                </div>

                <footer class="pd-25 bg-fff radius-6 mt-1 f-14 c-333">
                    <p>上一篇：
                        {{if pre}}
                        <a href="{{pre.path}}/article-{{pre.id}}.html" class="c-666">
                            {{pre.title}}
                        </a>
                        {{else}}
                        真的没有了
                        {{/if}}
                    </p>
                    <p class="mt-14">下一篇：
                        {{if next}}
                        <a href="{{next.path}}/article-{{next.id}}.html" class="c-666">
                            {{next.title}}
                        </a>
                        {{else}}
                        真的没有了
                        {{/if}}
                    </p>
                </footer>

            </article>

        </div>
    </main>

    <!-- footer -->
    {{include './common/footer.html'}}

    <!-- 移动端导航 -->
    {{include './common/wap-nav.html'}}
    
    <div class="ignore api mb-20 mt-20 pd-20 bg-f2f2f2">
        <h1>ChanCMS 当前页面数据：</h1>
        <p class="mb-20">site-> {{site}} </p>
        <p class="mb-20">nav-> {{nav}} </p>
        <p class="mb-20">category-> {{category}}</p>
        <p class="mb-20">friendlink-> {{friendlink}}</p>
        <p class="mb-20">base_url-> {{base_url}}</p>
        <p class="mb-20">frag--->{{frag}}</p>
        <p class="mb-20">tag--->{{tag}}</p>
        <p class="mb-20">position------>{{position}}</p>
        <p class="mb-20">navSub------>{{navSub}}</p>
        <p class="mb-20">article------>{{article}}</p>
        <p class="mb-20">article.tags------>{{article.tags}}</p>
        <p class="mb-20">news------>{{news}}</p>
        <p class="mb-20">hot------>{{hot}}</p>
        <p class="mb-20">imgs------>{{imgs}}</p>
        <p class="mb-20">pre------>{{pre}}</p>
        <p class="mb-20">next------>{{next}}</p>
    </div>
    {{include './common/js.html'}}
    <script src="{{base_url}}/js/katelog.min.js"></script>
    <script>
        const katelogIns = new katelog({
            contentEl: 'article',
            catelogEl: 'article-outline',
            linkClass: 'k-catelog-link',
            linkActiveClass: 'k-catelog-link-active',
            selector: ['h2', 'h3', 'h4', 'h5', 'h6'],
            supplyTop: 20,
            active: function (el) {
            }
        });
    // const html = '<h2>动态添加的标题</h2>'
    // katelogIns.contentEl.insertAdjacentHTML('afterBegin', html);
    // katelogIns.rebuild();
    </script>
</body>

</html>